BootstrapVue — Accordions and Dropdowns

To make good looking Vue apps, we need to style our components.

To make our lives easier, we can use components with styles built-in.

In this article, we’ll look at how to add an accordion and a dropdown with BootstrapVue.

Accordions

We can create an accordion with the b-collapse component.

To create one, we’ve to nest it inside a b-card component.

For instance, we can write:

<template>
  <div id="app">
    <b-card no-body class="mb-1">
      <b-card-header header-tag="header" class="p-1" role="tab">
        <b-button block href="#" v-b-toggle.accordion-1 variant="info">accordion 1</b-button>
      </b-card-header>
      <b-collapse id="accordion-1" visible accordion="my-accordion" role="tabpanel">
        <b-card-body>
          <b-card-text>accordion 1 text</b-card-text>
        </b-card-body>
      </b-collapse>
    </b-card>

    <b-card no-body class="mb-1">
      <b-card-header header-tag="header" class="p-1" role="tab">
        <b-button block href="#" v-b-toggle.accordion-2 variant="info">accordion 2</b-button>
      </b-card-header>
      <b-collapse id="accordion-2" accordion="my-accordion" role="tabpanel">
        <b-card-body>
          <b-card-text>accordion 2 text</b-card-text>
        </b-card-body>
      </b-collapse>
    </b-card>

    <b-card no-body class="mb-1">
      <b-card-header header-tag="header" class="p-1" role="tab">
        <b-button block href="#" v-b-toggle.accordion-3 variant="info">accordion 3</b-button>
      </b-card-header>
      <b-collapse id="accordion-3" accordion="my-accordion" role="tabpanel">
        <b-card-body>
          <b-card-text>accordion 3 text</b-card-text>
        </b-card-body>
      </b-collapse>
    </b-card>
  </div>
</template>

<script>
export default {
  name: "App"
};
</script>

We have 3 cards which are combined to create our accordion.

We have the b-card components on the outside.

Then we have the b-collapse component on the inside to create the accordion.

This way, we have the headers always displayed.

But the body is only displayed when we clicked on the heading, which also hides the other cards.

Dropdowns

Dropdowns are toggleable and contextual overlays for displaying list of links and actions.

To create one, we create the b-dropdown component with some b-dropdown-item components inside.

For instance, we can create a simple dropdown by writing:

<template>
  <div id="app">
    <b-dropdown id="dropdown-1" text="menu" class="m-md-2">
      <b-dropdown-item>apple</b-dropdown-item>
      <b-dropdown-divider></b-dropdown-divider>
      <b-dropdown-item active>active</b-dropdown-item>
      <b-dropdown-item disabled>disabled</b-dropdown-item>
    </b-dropdown>
  </div>
</template>

<script>
export default {
  name: "App"
};
</script>

We have the b-dropdown component with the text prop, which is set to the text of the drop-down button.

Therefore, we set our dropdown button text to 'menu' since that’s the value we have for text .

Inside it, we have the b-dropdown-item with various props.

The content is between the tags.

active makes a dropdown item active.

disabled makes a dropdown item disabled.

b-dropdown-divider is a divider on our dropdown menu.

Dropdown Button Content

We can customize our content of a drop with a template element to fill the button-content slot.

For instance, we can write:

<template>
  <div id="app">
    <b-dropdown>
      <template v-slot:button-content>
        <b>menu</b>
      </template>
      <b-dropdown-item>apple</b-dropdown-item>
    </b-dropdown>
  </div>
</template>

<script>
export default {
  name: "App"
};
</script>

We have the template element which fills the button-content as indicated by v-slot:button-content .

Inside it, we have <b>menu</b> to show bold text.

Below it, we have the usual dropdown items.

Menu Alignment

The menu alignment can change according to our preference.

The default is to left-align the menu.

If we want to right-align the menu, we can add the right prop to the b-dropdown component.

For instance, we can write:

<template>
  <div id="app" style="padding: 100px">
    <b-dropdown right text="right">
      <b-dropdown-item>apple</b-dropdown-item>
    </b-dropdown>
  </div>
</template>

<script>
export default {
  name: "App"
};
</script>

to right-align the menu if there’s enough room on the left edge of the screen.

Otherwise, it’ll go back to left aligning the menu.

Dropup

We can also make the menu stay above the button instead of below it.

We just have to add the dropup prop.

For example, we write:

<template>
  <div id="app" style="padding-top: 100px">
    <b-dropdown dropup text="right">
      <b-dropdown-item>apple</b-dropdown-item>
    </b-dropdown>
  </div>
</template>

<script>
export default {
  name: "App"
};
</script>

to do that.

Drop Right or Left

We can add similar props to make the menu show on the right or left instead of above or below the button.

dropright makes it show to the right of the button.

dropleft makes it show on the left of the button.

Conclusion

We can create accordion with cards and the collapse components.

Also, BootstrapVue has menu components we can use.